<template>
    <div>
        <Row class="wl-content">
            <Col span="24" class="action-button" v-show="headerShow !='no'">
                <div class="wl-content-group">
                    <Button class="wl-content-button" type="primary" @click="addAction">{{ addTitle }}</Button>
                    <Button class="wl-content-button" type="error" v-if="getUserInfo.id==1" @click="delSelect">批量删除
                    </Button>
                    <Button type="warning" @click="outCsv" v-if="getUserInfo.id == 1">导出数据</Button>
                </div>
            </Col>
            <Col span="24">
                <Table border stripe ref="selection" :loading="loading" :columns="tableHeader" :data="tableData"
                       @on-selection-change="tableSelectChange">
                    <template slot="action" slot-scope="{ row }">
                        <Button class="wl-content-button" type="primary" size="small" @click="editAction(row)">编辑
                        </Button>
                        <Button class="wl-content-button" v-if="getUserInfo.id==1" type="error" size="small"
                                @click="delOne(row.id)">删除
                        </Button>
                    </template>
                    <template slot="showLongTime" slot-scope="{ row }">
                        {{ userTimeToDate(row.how_long_time ,row.pay_time) }}
                    </template>

                    <template slot="howLong" slot-scope="{ row }">
                        <div v-if="isPast(row.how_long_time ,row.pay_time)">
                            <Tag color="success">正常</Tag>
                        </div>
                        <div v-else>
                            <Tag color="error">过期</Tag>
                        </div>
                    </template>
                    <template slot="state" slot-scope="{ row }">
                        <Button size="small" type="success" v-if="row.del_flag == 0" @click="changeState(row.id,1)">启用
                        </Button>
                        <Button size="small" type="error" v-else @click="changeState(row.id,0)">禁用</Button>
                    </template>

                    <template slot="payAction" slot-scope="{ row }">
                        <Button v-if="row.type===1" class="wl-content-button" type="primary" size="small"
                                @click="tableAction(row)">继续支付
                        </Button>
                    </template>
                    <template slot="showChild" slot-scope="{ row }">
                        <div v-if="row.pid == 0">
                            <a color="success" @click="showChildAction(row)">{{ row.login_name }}</a>
                        </div>
                        <div v-else>
                            {{ row.login_name }}
                        </div>
                    </template>
                </Table>
            </Col>
        </Row>
        <Row type="flex" justify="space-between" class="wl-footer">
            <Col span="14">
                <Button @click="handleSelectAll(true)" class="wl-content-button">全选</Button>
                <Button @click="handleSelectAll(false)">取消</Button>
            </Col>
            <Col span="10">
                <Page :total="apiResult.totalRecord" show-total show-sizer @on-change="pageChange"
                      @on-page-size-change="pageSizeChange"/>
            </Col>
        </Row>
        <change-pwd :show="show" @cancelShow="cancelShow" :change-id="changeId"></change-pwd>
    </div>
</template>
<script>
import { resourceAction } from '@/api/google'
import ChangePwd from '@/components/layout/theme1/header/change-pwd/index'

export default {
  name: 'WlResourceTable',
  components: { ChangePwd },
  props: {
    params: {
      type: Object,
      default: () => {
        return {}
      }
    },
    headerShow: {
      type: String,
      default: () => {
        return 'no'
      }
    },
    addTitle: {
      type: String,
      default: () => {
        return '新增'
      }
    }
  },
  data () {
    return {
      tableHeader: [],
      tableData: [],
      model: '',
      action: '',
      apiResult: {},
      loading: false,
      page: {
        pageSize: 10,
        page: 1
      },
      changeId: '',
      show: false
    }
  },
  computed: {
    sendParams () {
      return Object.assign({}, this.page, this.params)
    },
    getUserInfo () {
      return this.$store.state.user.severUserInfo.data
    }
  },
  methods: {
    pageChange (e) {
      this.page.page = e
      this.getList()
    },
    pageSizeChange (e) {
      this.page.pageSize = e
      this.page.page = 1
      this.getList()
    },
    delSelect () {
      let delList = this.selectData
      let ids = []
      if (delList.length <= 0) {
        this.$Message.error('请选择要删除的数据')
        return false
      }
      delList.forEach((item, index) => {
        ids.push(item.id)
      })
      resourceAction({ ids: JSON.stringify(ids) }, 'delete', this.model, this.action).then(ret => {
        if (ret.data.errcode === 1001) {
          this.getList()
        } else {
          this.$Message.error('删除失败')
        }
      })
    },
    delOne (id) {
      resourceAction({ ids: JSON.stringify([id]) }, 'delete', this.model, this.action).then(ret => {
        if (ret.data.errcode === 1001) {
          this.getList()
        } else {
          this.$Message.error('删除失败')
        }
      })
      this.$Modal.confirm({
        title: '确定删除吗？',
        onOk: () => {
          resourceAction({ ids: JSON.stringify([id]) }, 'delete', this.model, this.action).then(ret => {
            if (ret.data.errcode === 1001) {
              this.getList()
            } else {
              this.$Message.error('删除失败')
            }
          })
        }
      })
    },
    getList () {
      this.loading = true
      resourceAction(this.sendParams, 'get', this.model, this.action).then(ret => {
        this.loading = false
        let result = ret.data
        if (result.errcode === 1001) {
          let header = []
          result.data.header.forEach(item => {
            if (item.render) {
              item = {
                title: item.title,
                render: evil(item.render)
              }
            }
            console.log(item)
            header.push(item)
          })
          this.tableHeader = header
          this.tableData = result.data.results
          this.apiResult = result.data
        }
      })
    },
    handleSelectAll (status) {
      this.$refs.selection.selectAll(status)
    },
    tableSelectChange (selection) {
      this.selectData = selection
    },
    addAction () {
      this.$emit('addAction')
    },
    editAction (row) {
      this.$emit('editAction', row)
    },
    tableAction (row) {
      this.$emit('payAction', row)
    },
    userTimeToDate (a, b) {
      if (parseInt(a + b) > 0) {
        return this.$common.xeUtils.toDateString(parseInt(a + b) + '000')
      } else {
        return '无'
      }
    },
    isPast (a, b) {
      if (parseInt(a + b) > ((new Date()).getTime() / 1000)) {
        return true
      } else {
        return false
      }
    },
    changeState (id, type) {
      resourceAction({ id: id, del_flag: type }, 'post', this.model, this.action).then(ret => {
        this.getList()
      })
    },
    outCsv () {
      let header = [
        { title: '编号', key: 'id' },
        { title: '登录名称', key: 'login_name' },
        { title: '公司名称', key: 'company_name' },
        { title: '行业', key: 'industry' },
        { title: '所在地', key: 'address' },
        { title: '主营产品', key: 'main_product' },
        { title: '创建时间', key: 'create_time' },
        { title: '有效期', key: 'toDate' }
      ]
      let data = JSON.parse(JSON.stringify(this.tableData))
      this.$refs.selection.exportCsv({
        filename: '导出的数据',
        columns: header,
        data: data.map(item => {
          item.pay_time = this.$common.xeUtils.toDateString(item.pay_time, 'yyyy/MM/dd HH:mm:ss')
          item.toDate = this.userTimeToDate(item.how_long_time, item.pay_time)
          return item
        })
      })
    },
    cancelShow () {
      this.show = false
    },
    changePwd (id) {
      this.changeId = id
      this.show = true
    },
    showChildAction (row) {
      this.$emit('showChild', row)
    }
  },
  mounted () {
    this.model = this.$route.params.model
    this.action = this.$route.params.action
    this.getList()
  },
  watch: {
    $route (to) {
      this.model = to.params.model
      this.action = to.params.action
    }
  }
}

</script>
<style scoped lang="less">
    .wl-content {
        margin-bottom: 10px;

        &-group {
            margin: 10px;
        }

        &-button {
            margin-right: 10px;
        }
    }

    .button {
        margin-left: 10px;
    }
</style>
